<template>
      <el-main>
        <div class="header">
          <div class="left">官方公告</div>
          <h5>为什么你的作品缺乏视觉焦点？用实战案例为你分析.</h5>
          <a href="#">了解详情</a>
        </div>
        <div class="content">
          <li v-for="(item, index) in list" :key="index">
            <div class="left">
              <img :src="item.img" alt="" />
            </div>
            <div class="right">
              <p>{{ item.p }}</p>
              <p>{{ item.h5 }}</p>
            </div>
          </li>
        </div>
        <div class="footer">
        <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="付费Live(12)" name="first"><el-empty description="描述文字"></el-empty></el-tab-pane>
    
    <el-tab-pane label="音频&图文专辑(4)" name="second"></el-tab-pane>
  </el-tabs>
        </div>
      </el-main>
  <!-- </div> -->
 
</template>

<script>

export default {
  name: "Home",
  components: {
    
  },
  data() {
    return {
      activeName: 'first',
      list: [
        {
          img: require("../assets/img/11.png"),
          p: "50,541",
          h5: "昨日新增关注数",
        },
        {
          img: require("../assets/img/12.png"),
          p: "3,212",
          h5: "粉丝总数",
        },
        {
          img: require("../assets/img/13.png"),
          p: "4,532",
          h5: "购买总人数（人次）",
        },
        {
          img: require("../assets/img/14.png"),
          p: "67,193",
          h5: "总收益(T币)",
        },
      ],
    };
  },
  
  methods:{
      handleClick(tab, event) {
        console.log(tab, event);
    },
    
  }
}
</script>
<style>
.el-container:nth-child(2){
  display: flex;
  flex: 1;
  justify-content: space-between;
  width: 80%;
  margin: auto;
  margin-top: 20px;
}

.footer{
  margin-top: 20px;
  background-color: #fff;
  height: 560px;
}
.footer .el-menu{
  height: 540px;
}
.el-main {
  /* flex: 1; */
  padding: 0 !important;
}
.header {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  background-color: #fff;
}
.header a {
  text-decoration: none;
  color: #1cdaa4;
}
.header .left {
  width: 70px;
  background-color: orange;
  height: 20px;
  margin-left: 20px;
  margin-right: 20px;
  text-align: center;
}
.content .left img {
  width: 50px;
  height: 50px;
}
.content {
  display: flex;
  justify-content: space-between;
  
  margin-top: 20px;
  height: 150px;
}

.content li {
  width: 23%;
  display: flex;
  justify-content: space-around;
  list-style: none;
  align-items: center;
  background-color: #fff;
}
</style>